<template>
  <div>
    <div class="box">
      <a-layout class="logincontent">
        <a-form
          class="loginform"
          :model="user"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-typography-title style="text-align: center"
            >用户登录</a-typography-title
          >
          <a-form-item label="账号" :wrapper-col="{ span: 15, offset: 4 }">
            <a-input v-model:value="user.cust_name" />
          </a-form-item>

          <a-form-item label="密码" :wrapper-col="{ span: 15, offset: 4 }">
            <a-input-password
              v-model:value="user.password"
              @keyup.enter="login"
            />
          </a-form-item>

          <a-form-item :wrapper-col="{ span: 15, offset: 8 }">
            <a-row type="flex" justify="space-between">
              <a-button type="primary" @click="login">登录</a-button>
              <a-button type="primary" @click="cancel">取消</a-button>
              <a-button type="primary" @click="register">注册</a-button>
              <a-button type="primary" @click="managerlogin"
                >管理员登录</a-button
              >
            </a-row>
          </a-form-item>
        </a-form>
      </a-layout>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { post, setLocalToken, tip, get } from "@/common";

import { useRouter } from "vue-router";

const router = useRouter(); //获取用户路由

//reactive 用于双向绑定响应
const user = reactive({
  cust_name: "",
  password: "",
});

const login = () => {
  //then方法仅接收成功操作的结果

  post("/security/login", user).then((res) => {
    tip.success("登录成功！");

    const token = res.data; //获取返回的令牌
    //将令牌缓存本地
    setLocalToken(token);
    //跳转至home路由

    router.push({ path: "/home" });
  });
};

const cancel = () => {
  //跳转至home路由
  router.push({ path: "/home" });
};

const managerlogin = () => {
  //跳转至userlogin路由
  router.push({ path: "/m_login" });
};
const register = () => {
  //跳转至userlogin路由
  router.push({ path: "/register" });
};

//一行24列
const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 10,
};
</script>

<style>
.logincontent {
  /* 加载背景图 */
  background-image: url("loginbac.png");
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;

  width: calc(100vw);
  height: calc(100vh);

  justify-content: center;
  align-items: center;
}
.loginform {
  background-color: #fff;
  min-width: 600px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
  padding: 30px 20px;
}
</style>